<template>
	<view class="demand-order-detail">
		<view class="demand-info">
			<view class="name">{{ info.title }}</view>
			<view class="bottom">
				<view class="price">{{ info.lowestPrice }}-{{ info.tallPrice }}</view>
				<view class="tag">{{ info.type === 'OPERATE' ? '营运' : '非营运' }}</view>
			</view>
		</view>
		<view class="nav-title">可跑平台</view>
		<view class="tags">
			<view class="tag" v-for="el in info.platform" :key="el">
				{{ el }}
			</view>
		</view>
		<view class="nav-title">其他要求</view>
		<view class="desc">
			{{ info.otherRequire }}
		</view>
		<view class="action-bottom">
			<button class="cu-btn cu-btn-a" @click="handQiang">立即抢单</button>
		</view>
		<uv-modal ref="modal" show-cancel-button confirm-color="#FF9113" @confirm="handConfirm" width="550rpx">
			<view style="line-height: 100rpx;">{{ tip }}</view>
		</uv-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload,
	} from "@dcloudio/uni-app";
	import {
		doDetail,
		doQiang
	} from '@/apis/demand.js'
	const {
		proxy
	} = getCurrentInstance();
	let type = 'cancel'
	const modal = ref()
	const tip = ref('')
	const handQiang = () => {
		type = 'qiang'
		tip.value = '确认要抢单吗?'
		modal.value.open()
	}
	const handConfirm = async () => {
		if (type === 'qiang') {
			await doQiang(info.value.id)
			uni.$uv.toast('抢单成功')
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('qiangEvent', info.value);
			setTimeout(() => {
				uni.redirectTo({
					url: '/pagesA/order/demand'
				})
			}, 500)
		}
	}
	const info = ref({
		platform: []
	})
	const init = async (id) => {
		const data = await doDetail(id)
		data.platform = data.platform.split(',')
		info.value = data
	}
	onLoad((e) => {
		init(e.id)
	})
</script>

<style lang="scss" scoped>
	.demand-order-detail {
		padding: 24rpx;
		padding-bottom: 150rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

		.demand-info {
			padding-bottom: 44rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF4E00;
				}

				.tag {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #C16F0B;
					padding: 10rpx;
					background: linear-gradient(180deg, #FFF7E4 0%, #FFE49E 100%);
					border-radius: 10rpx 0rpx 10rpx 0rpx;
				}
			}
		}

		.nav-title {
			margin-top: 46rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.tags {
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;

			.tag {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 6rpx 16rpx;
				background: #F5F5F5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		.desc {
			margin-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.action-bottom {
			position: fixed;
			bottom: 50rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
			bottom: calc(env(safe-area-inset-bottom) + 50rpx);
			left: 0;
			width: 750rpx;
			display: flex;
			justify-content: center;

			.cu-btn-a {
				width: 686rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>